<template>
  <div class="modal-box">
    <el-form>
      <el-row>
        <el-col :span="24" class="f-w title">会员费订单信息</el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="用户账号:">{{userInfo.username}}</el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="付款时间:">{{detail.created_at}}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="会员费:">{{detail.price}}</el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="加入会员店名称:">{{shopInfo.shop_name}}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="类型:">
                <p v-if="detail.order_type == 30">新会员订单</p>
           <p v-if="detail.order_type == 31">续费会员订单</p>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="会员有效期:">
            {{vipInfo.use_start_time}}——{{vipInfo.use_end_time}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="返红包金额:">¥{{detail.rebate_money}}</el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="状态:">
            <p v-if="Number(vipInfo.refund_money) > 0">失效</p>
            <p v-if="Number(vipInfo.refund_money) == 0">使用中</p>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col :span="24" class="f-w title m-t">会员费分配信息</el-col>
      <el-table
        :data="tableData"
        :cell-style="tc"
        :header-cell-style="tccolor"
        v-loading="listLoading"
      >
        <el-table-column fixed prop="uid" label="用户ID"></el-table-column>
        <el-table-column prop="username" label="用户账号"></el-table-column>
        <el-table-column  label="身份">
          <template slot-scope="scope">
            <p v-if="scope.row.role == 0">普通乐粉</p>
            <p v-if="scope.row.role == 1">小店店主</p>
            <p v-if="scope.row.role == 2">合伙人</p>
            <p v-if="scope.row.role == 5">服务商</p>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="charge_time" label="关系"></el-table-column> -->
        <el-table-column prop="commission_rate" label="分成比"></el-table-column>
        <el-table-column prop="money" label="金额">
          <template slot-scope="scope">
            ¥ {{scope.row.money}}
          </template>
        </el-table-column>
      </el-table>
    </el-row>


    <div class="class_btn">
      <el-button size="mini" type="primary" @click="handleCancel">确定</el-button>
      <el-button size="mini" type="danager" @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>
<script>
import {orderJoinshopDetail} from '@/api/shopdetail'
export default {
  name: "detailInfo",
  props: ["currentId",'visible'],
  data() {
    return {
      listLoading: false,
      detail:{},
      userInfo:{},
      vipInfo:{},
      shopInfo:{},
      tableData: [],

    };
  },
  watch: {
     visible(newValue) {
      if (newValue) {
         this.orderJoinshopDetailData()
      }
    }
  },
  mounted() {},
  methods: {

    async  orderJoinshopDetailData(){
      let res = await orderJoinshopDetail(this.currentId)
      if(res.code === 10000){
       this.detail = res.data
       this.userInfo = res.data.user_info
       this.vipInfo = res.data.vip_info
       this.shopInfo = res.data.shop_info
       this.tableData = res.data.vip_commission
      }else{
        this.$message.error(res.message)
      }

    },

     handleCancel() {
      this.$emit("showSkuInfoDetail");
    },
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  }
};
</script>
<style lang="scss">
.modal-box {
  padding: 0 20px;
  .el-row {
    .el-form-item {
      margin-bottom: 0;
    }
  }
  .title {
    position: relative;
    font-size: 20px;
    margin-bottom: 10px;
    &::before {
      content: "";
      width: 4px;
      height: 24px;
      background-color: #f4222d;
      left: -8px;
      top: 50%;
      border-radius: 2px;
      transform: translateY(-50%);
      position: absolute;
    }
  }
  .f-w {
    font-weight: bold;
  }
  .m-t {
    margin-top: 30px;
  }
  .class_btn{
    text-align: center;
    margin:16px 0;
  }
}
</style>
